<template>
    <div class="div-container">
        <el-date-picker
              v-model="dateRange"
              style="width: 360px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
        <el-button class="button-margin" type="primary" icon="el-icon-search" size="mini" @click="initChart">搜索</el-button>
        <div ref="chart" class="chart-container"></div>
    </div>
</template>

<script>

import * as echarts from "echarts";
import moment from "moment";

import {selectSiloResult} from '@/api/radar/radarResult';

export default {
    props:['name','stockId'],
    data(){
        return{
            chart:undefined,
            option:undefined,
            dateRange:[],
        }
    },
    mounted(){
        this.dateRange = [moment().subtract(1, "days").format('YYYY-MM-DD HH:mm:ss'),moment().format("YYYY-MM-DD HH:mm:ss")]
        this.initChart();
    },
    beforeDestroy(){
        this.clearChart();
    },
    methods:{
        initChart(){
            var startTime = this.dateRange[0];
            var endTime = this.dateRange[1];

            selectSiloResult({type:"1",stockId:this.stockId,startTime:startTime,endTime:endTime}).then(res=>{
                var siloResult = res.data.data;

                if(this.name == "物位曲线"){
                    var dateAxis = [];
                    var minAxis = [];
                    var levAxis = [];
                    var maxAxis = [];
                    siloResult.forEach(item => {
                        dateAxis.push(moment(item.createTime).format("YYYY-MM-DD HH:mm:ss").substring(11));
                        minAxis.push(item.linerMin)
                        levAxis.push(item.linerLev)
                        maxAxis.push(item.linerMax)
                    });

                    if(this.chart){
                        this.option.series[0].data = minAxis;
                        this.option.series[1].data = levAxis;
                        this.option.series[2].data = maxAxis;
                    }else{
                        this.option = {
                            legend:{
                                show:true,
                                data:["最小值","平均值","最大值"],
                                itemWidth: 10, 
                                itemHeight: 6,
                                textStyle:{
                                    fontSize:10,
                                } 
                            },
                            tooltip:{
                                trigger: 'axis',
                            },
                            xAxis: {
                                type: 'category',
                                data: dateAxis,
                                boundaryGap: false
                            },
                            yAxis: {
                                type: 'value'
                            },
                            grid: {
                                left: '0.5%',   // 距离容器左边缘的距离
                                right: '1%',  // 距离容器右边缘的距离
                                top: '10%',    // 距离容器上边缘的距离
                                bottom: '5%',  // 距离容器下边缘的距离
                                containLabel :true,
                            },
                            series: [
                                {
                                    name:"最小值",
                                    data: minAxis,
                                    type: 'line',
                                    smooth: true,
                                    showSymbol: false,
                                },
                                {
                                    name:"平均值",
                                    data: levAxis,
                                    type: 'line',
                                    smooth: true,
                                    showSymbol: false,
                                },
                                {
                                    name:"最大值",
                                    data: maxAxis,
                                    type: 'line',
                                    smooth: true,
                                    showSymbol: false,
                                },
                            ]
                        };
                        this.chart = echarts.init(this.$refs.chart);
                    }
                    

                }else if(this.name == "体积质量曲线"){
                    var dateAxis = [];
                    var volAxis = [];
                    var weighAxis = [];
                    siloResult.forEach(item => {
                        dateAxis.push(moment(item.createTime).format("YYYY-MM-DD HH:mm:ss").substring(11));
                        volAxis.push(item.linerVol)
                        weighAxis.push(item.linerWeigh)
                    });
                    if(this.chart){
                        this.option.series[0].data = volAxis;
                        this.option.series[1].data = weighAxis;
                    }else{
                        this.option = {
                            legend:{
                                show:true,
                                data:["体积","重量"],
                                itemWidth: 10, 
                                itemHeight: 6,
                                textStyle:{
                                    fontSize:10,
                                } 
                            },
                            tooltip:{
                                trigger: 'axis',
                            },
                            xAxis: {
                                type: 'category',
                                data: dateAxis,
                                boundaryGap: false
                            },
                            yAxis: {
                                type: 'value'
                            },
                            grid: {
                            left: '0.5%',   // 距离容器左边缘的距离
                            right: '1%',   // 距离容器右边缘的距离
                            top: '10%',    // 距离容器上边缘的距离
                            bottom: '5%',  // 距离容器下边缘的距离
                            containLabel :true,
                            },
                            series: [
                            {
                                name:"体积",
                                data: volAxis,
                                type: 'line',
                                smooth: true,
                                showSymbol: false,
                            },
                            {
                                name:"重量",
                                data: weighAxis,
                                type: 'line',
                                smooth: true,
                                showSymbol: false,
                            },
                            ]
                        };
                        this.chart = echarts.init(this.$refs.chart);
                    }
                }
                this.chart.setOption(this.option,true);

            });

        },
        clearChart(){
            if(this.chart){
                this.chart.dispose();
                this.chart = undefined;
            }
        }
    }


}
</script>

<style lang="scss" scoped>
    .div-container{
        // width: 600px;
        height: 460px;
    }
    .chart-container{
        width: 100%;
        height: calc(100% - 36px);
    }
    .button-margin{
        margin-left: 10px;
    }
</style>